<!--头部  -->
<template>
	<div class="table">
		<div class="fBox" v-for="(item, index) in list" :key="index">
			<div class="fBox-top">{{ item.name }}</div>
			<div class="fBox-bottom">
				<div class="num">
					<ScrollNumber :itemStyle="{
							fontSize: '28px'
						}" class="scrollNumber" :value="item.val || 0"></ScrollNumber>
				</div>
				<div class="van">{{ item.van }}</div>
			</div>
		</div>
	</div>
</template>

<script>
	import border from '../border.vue';
	import StatisticsMixins from '../../StatisticsMixins';
	import ScrollNumber from '@/components/vue-scroll-number/src/scroll-number';
	import {
		bigScreenApi
	} from '@/api/index';

	let color = ['#2467ED', '#16E4CF', '#EBA62C'];
	export default {
		components: {
			border
		},
		mixins: [StatisticsMixins],
		components: {
			ScrollNumber
		},
		data() {
			return {
				list: [{
						name: '医院数',
						val: 15,
						van: '个'
					},
					{
						name: '医护数',
						val: 230,
						van: '人'
					},
					{
						name: '病人数',
						val: 1209,
						van: '人'
					},
					
				]
			};
		},
		props: {
			level: {
				type: [String, Number],
				default: 0
			},
			cityId: {
				type: [String, Number],
				default: ''
			}
		},
		watch: {
			level: {
				handler(newV, oldV) {
					this.getInfo();
				},
				immediate: true
			}
		},

		methods: {
			getInfo() {
				this.$postAction(bigScreenApi.summaryCount, {
					xzqhbm: this.level > 1 ? this.cityId : '',
					level: this.level
				}).then(res => {
					if (res && res.code == 1) {
						let cowData = res.data;
						this.list = [{
								name: '牧场数',
								val: cowData.farmCount,
								van: '个'
							},
							{
								name: '存栏量',
								val: cowData.columnCowCount,
								van: cowData.columnCowCount > 10000 ? '万' : '' + '头'
							},
							{
								name: '今年出栏量',
								val: cowData.publishCowCount,
								van: cowData.publishCowCount > 10000 ? '万' : '' + '头'
							},
							{
								name: '防疫数量',
								val: cowData.preventCowCount,
								van: cowData.preventCowCount > 10000 ? '万' : '' + '头'
							}
						];
					}
				});
			}
		}
	};
</script>

<style scoped lang="less">
	.table {
		width: calc(100% - 1.6rem);
		height: calc(100% - 0.2rem);
		/* padding: 26px 17px; */
		//   border: 1px solid red;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;

		.fBox {
			display: flex;
			flex-direction: column;
			width: 33.33%;

			&-top {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				flex: 1;
				font-size: 16px;
				// font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #eeeeee;
			}

			&-bottom {
				height: 0.44rem;
				width: 100%;
				display: flex;
				align-items: flex-end;
				justify-content: center;

				.num {
					font-size: 35px;
					// font-family: PingFang SC-Semibold, PingFang SC;
					font-weight: 600;
					color: #ffffff;
					display: flex;
				}

				.van {
					font-size: 12px;
					// font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #eeeeee;
					margin: 0 0 0.2em 0;
				}
			}
		}
	}
</style>